<template>
  <div>
    <div class="user-buy">
      <mt-navbar v-model="selected">
        <mt-tab-item 
          :id="k"
          v-for="(v, k) in tabMenu"
          :key="k"
          @click.native="changeSelect(k)"
          ref="tabItem"
        >
          {{v}}
        </mt-tab-item>
      </mt-navbar>
      <!-- tab-container -->
      <mt-tab-container v-model="selected">
        <!-- 待支付 -->
        <mt-tab-container-item id="1">
          <div class="buy-card"
            v-for="v in platfromPayList" :key="v.id"
          >
            <div class="content">
              <img :src="v.image">
              <div class="text">
                <p class="name">{{v.name}}-{{v.suffix_name}}</p>
                <p class="desc">数量：x1</p>
                <p class="desc">价格：<span class="red">¥{{v.price}}</span></p>
              </div>
            </div>
            <div class="footer">
              <span class="hint"></span>
              <div class="button">
                <mt-button class="cancel" @click.native.stop="cancelPlatformOrder(v.id)">取消支付</mt-button>
                <mt-button class="confirm" @click.native="$router.push({name: 'PayPlatform', params: {id: v.id}})">去支付</mt-button>
              </div>
            </div>
          </div>
          <div class="buy-card"
            v-for="v in payList" :key="v.id"
          >
            <div class="content">
              <img :src="v.image">
              <div class="text">
                <p class="name">{{v.name}}-{{v.suffix_name}}</p>
                <p class="desc">数量：x{{v.number}}</p>
                <p class="desc">价格：<span class="red">¥{{v.amount}}</span></p>
              </div>
            </div>
            <div class="footer">
              <span class="hint">请于{{v.pay_time}}前完成支付</span>
              <div class="button">
                <mt-button class="cancel" @click.native.stop="cancelOrder(v.id)">取消支付</mt-button>
                <mt-button class="confirm" @click.native="$router.push({name: 'Pay', params: {id: v.id}})">去支付</mt-button>
              </div>
            </div>
          </div>
        </mt-tab-container-item>
        <!-- 待使用 -->
        <mt-tab-container-item id="2">
          <!-- 搜索框 -->
          <div class="search-group" v-if="ifSearch">
            <div class="search-input long">
              <input type="text" placeholder="请输入券码" class="input-text" v-model="searchInput">
              <div class="input-file">
                <img src="/src/assets/icons/camera.png">
                <input type="file" name="file" @change="uploads">
              </div>
              <span class="v-line"></span>
              <span class="text" @click="search">搜索</span>
            </div>
            <div class="search-input short">
              <span class="text" @click="takeGoods">提货</span>
            </div>
          </div>
          <div>
            <div class="buy-card"
              v-for="v in searchList" :key="v.id"
              @click="$router.push({name: 'OrderDetail', params: {id: v.order_detail_id}})"
            >
              <div class="content">
                <img :src="v.image">
                <div class="text">
                  <p class="name">{{v.name}}-{{v.suffix_name}}</p>
                  <p class="desc">&nbsp;</p>
                  <p class="desc">价格：<span class="red">¥{{v.price}}</span></p>
                </div>
              </div>
            </div>
          </div>
          <mt-loadmore
            :bottom-method="loadBottom"
            :bottom-all-loaded="allLoaded2"
            :autoFill="autoFill"
            ref="loadmore2"
            v-if="searchList.length === 0"
          >
            <!-- 平台商品 -->
            <div class="buy-card"
              v-for="v in platfromToUseList" :key="v.id"
            >
              <div class="content">
                <img :src="v.image">
                <div class="text">
                  <p class="name">{{v.name}}-{{v.suffix_name}}</p>
                  <p class="desc">下单时间：{{v.create_time}}</p>
                  <p class="desc">价格：<span class="red">¥{{v.price}}</span></p>
                </div>
              </div>
              <div class="footer">
                <span class="hint"></span>
                <div class="button">
                  <span></span>
                  <mt-button class="confirm" @click.native="platformRefund(v.id, v.price)">退款</mt-button>
                </div>
              </div>
            </div>
            <div class="buy-card"
              v-for="v in toUseList" :key="v.id"
              @click="$router.push({name: 'OrderDetail', params: {id: v.order_detail_id}})"
            >
              <div class="content">
                <img :src="v.image">
                <div class="text">
                  <p class="name">{{v.name}}-{{v.suffix_name}}</p>
                  <p class="desc">下单时间：{{v.create_time}}</p>
                  <p class="desc">价格：<span class="red">¥{{v.price}}</span></p>
                </div>
              </div>
              <div class="footer">
                <span class="hint">{{v.auto_confirm_tips}}</span>
                <img src="/src/assets/icons/qrcode.png" class="qrcode"
                  v-if="v.qr_code !== ''"
                  @click.stop="showQrcode(v.qr_code, v.order_detail_id)"
                >
              </div>
            </div>
            <!-- 券商 -->
            <div class="buy-card"
              v-for="v in toUseList1" :key="v.id"
              @click="$router.push({name: 'OrderDetail', params: {id: v.order_detail_id}})"
            >
              <div class="content">
                <img :src="v.image">
                <div class="text">
                  <p class="name">{{v.name}}-{{v.suffix_name}}</p>
                  <p class="desc">下单时间：{{v.create_time}}</p>
                  <p class="desc">价格：<span class="red">¥{{v.price}}</span></p>
                </div>
              </div>
              <div class="footer">
                <span class="hint">{{v.auto_confirm_tips}}</span>
                <img src="/src/assets/icons/qrcode.png" class="qrcode"
                  v-if="v.qr_code !== ''"
                  @click.stop="showQrcode(v.qr_code, v.order_detail_id)"
                >
              </div>
            </div>
            <!-- other -->
            <div class="buy-card"
              v-for="v in toUseList2" :key="v.id"
              @click="$router.push({name: 'OrderDetail', params: {id: v.order_detail_id}})"
            >
              <div class="content">
                <img :src="v.image">
                <div class="text">
                  <p class="name">{{v.name}}-{{v.suffix_name}}</p>
                  <p class="desc">下单时间：{{v.create_time}}</p>
                  <p class="desc">价格：<span class="red">¥{{v.price}}</span></p>
                </div>
              </div>
              <div class="footer">
                <span class="hint">{{v.auto_confirm_tips}}</span>
                <img src="/src/assets/icons/qrcode.png" class="qrcode"
                  v-if="v.qr_code !== ''"
                  @click.stop="showQrcode(v.qr_code, v.order_detail_id)"
                >
              </div>
            </div>
          </mt-loadmore>
        </mt-tab-container-item>
        <!-- 已完成 -->
        <mt-tab-container-item id="3">
          <mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded3" :autoFill="autoFill" ref="loadmore3">
            <!-- 平台商品 -->
            <div class="buy-card"
              v-for="v in platfromUsedList" :key="v.id"
            >
              <div class="content">
                <img :src="v.image">
                <div class="text">
                  <p class="name">{{v.name}}-{{v.suffix_name}}</p>
                  <p class="desc">确认时间：{{v.finish_time}}</p>
                  <p class="desc">价格：<span class="red">¥{{v.price}}</span></p>
                </div>
              </div>
              <div class="footer">
                <span class="hint"></span>
                <img src="/src/assets/icons/complete-goods.png" class="complete-img">
              </div>
            </div>
            <div class="buy-card"
              v-for="v in finishList" :key="v.id"
              @click="$router.push({name: 'OrderDetail', params: {id: v.order_detail_id}})"
            >
              <div class="content">
                <img :src="v.image">
                <div class="text">
                  <p class="name">{{v.name}}-{{v.suffix_name}}</p>
                  <p class="desc">确认时间：{{v.finish_time}}</p>
                  <p class="desc">价格：<span class="red">¥{{v.price}}</span></p>
                </div>
              </div>
              <div class="footer">
                <span class="hint">{{v.how_to_use}}</span>
                <img src="/src/assets/icons/complete-goods.png" class="complete-img">
              </div>
            </div>
          </mt-loadmore>
        </mt-tab-container-item>
        <!-- 纠纷中 -->
        <mt-tab-container-item id="4">
          <mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded4" :autoFill="autoFill" ref="loadmore4">
            <div class="buy-card"
              v-for="v in disputeList" :key="v.id"
              @click="$router.push({name: 'OrderDetail', params: {id: v.order_detail_id}})"
            >
              <div class="content">
                <img :src="v.image">
                <div class="text">
                  <p class="name">{{v.name}}-{{v.suffix_name}}</p>
                  <p class="desc">时间：{{v.dispute_time}}</p>
                  <p class="desc">纠纷金额：<span class="red">¥{{v.price}}</span></p>
                </div>
              </div>
              <div class="footer">
                <span></span>
                <img :src="`/src/assets/icons/${Number(v.status) === 3 ? 'handle' : 'complete'}-goods.png`" class="complete-img">
              </div>
            </div>
          </mt-loadmore>
        </mt-tab-container-item>
      </mt-tab-container>
      <!-- 二维码显示 -->
      <mt-popup v-model="popupVisible" position="middle">
        <div class="picture">
          <img :src="qrCode">
        </div>
        <div class="button-group">
          <mt-button plain class="dispute" @click.native="sendSms">有纠纷</mt-button>
          <mt-button plain class="complete" @click.native="alreadyUsed">已使用</mt-button>
        </div>
      </mt-popup>
      <!-- 绑定手机号 -->
      <mobile-bind ref="mobileBind" @sendSms="sendSms"></mobile-bind>
      <!-- 纠纷原因 -->
      <mt-popup v-model="disputePopup" position="middle">
        <div data-role="outer" style="font-size:16px;color:#000;">
          <div class="article135" style="background-repeat: repeat; background-position: left top; padding: 10px; background-size: auto; box-sizing: border-box;">
            <div data-role="outer" style="font-family:微软雅黑;font-size:16px;">
              <div style="font-family:微软雅黑;font-size:16px;" data-role="outer">
                <div style="font-family:微软雅黑;font-size:16px;" data-role="outer">
                  <div class="_135editor" style="padding: 0px; border: 0px none; box-sizing: border-box;" data-role="paragraph">
                    <div class="_135editor" data-id="85638" style="border: 0px none; padding: 0px; box-sizing: border-box;" data-color="rgb(239, 112, 96)" data-custom="rgb(239, 112, 96)">
                      <div class="layout" style="margin: 2em auto 0px; padding: 0.5em 0px; white-space: normal; border-right: none; border-bottom: none; border-left: none; border-image: initial; border-top: 1px solid rgb(204, 204, 204); display: block; font-size: 1em; font-family: inherit; font-style: normal; font-weight: inherit; text-decoration: inherit; color: rgb(166, 166, 166); box-sizing: border-box;">
                        <div style="margin-top: -1.2em; text-align: center; padding: 0px; border: none; line-height: 1.4; box-sizing: border-box;">
                          <span style="white-space: pre-wrap; background-color: #EF7060; border-color: #EF7060; font-family: inherit; font-style: normal; font-weight: inherit; padding: 8px 23px; text-align: center; text-decoration: inherit; color: #FFFFFF; font-size: 13px;">温馨提示</span>
                        </div>
                      </div>
                    </div>
                    <div class="_135editor" data-id="87843" style="border: 0px none; padding: 0px; box-sizing: border-box;">
                      <div style="margin: 1em auto; text-align: center;">
                        <div style="border: 1px solid rgb(128, 177, 53); padding: 3px; display: inline-block; box-sizing: border-box;">
                          <div class="135brush" data-brushtype="text" style="border: 1px dashed rgb(128, 177, 53); padding: 0.2em 1em; box-sizing: border-box;">真的要提纠纷吗？</div>
                        </div>
                      </div>
                    </div>
                    <p style="text-align: center; letter-spacing: 2px;"><span style="font-size: 15px;"><span style="font-size: 13px;">若出现纠纷，也请不必担心，客服将在<strong>七个工作日</strong>内妥善处理；纠纷处理后，若您无责，已付款项将<strong>原路退回</strong>。</span></span></p>
                    <p style="text-align: center; letter-spacing: 2px;"><span style="color: #FF0000; font-size: 14px;">注：买错、非券码问题不接受纠纷申请</span></p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="dispute-reason">
          <div data-id="85638" data-color="rgb(239, 112, 96)" data-custom="rgb(239, 112, 96)" class="_135editor" style="border: 0px none; padding: 0px; box-sizing: border-box;"><div class="layout" style="margin: 2em auto 0px; padding: 0.5em 0px; white-space: normal; border-right: none; border-bottom: none; border-left: none; border-image: initial; border-top: 1px solid rgb(204, 204, 204); display: block; font-size: 1em; font-family: inherit; font-style: normal; font-weight: inherit; text-decoration: inherit; color: rgb(166, 166, 166); box-sizing: border-box;"><div style="margin-top: -1.2em; text-align: center; padding: 0px; border: none; line-height: 1.4; box-sizing: border-box;"><span style="white-space: pre-wrap; background-color: rgb(239, 112, 96); border-color: rgb(239, 112, 96); font-family: inherit; font-style: normal; font-weight: inherit; padding: 8px 23px; text-align: center; text-decoration: inherit; color: rgb(255, 255, 255); font-size: 13px;">选择纠纷原因</span></div></div></div>
          <div class="radio-item" @click="disputeCheck(1, '串码可用，但与商品不符')">
            <span>串码可用，但与商品不符</span>
            <img :src="`/src/assets/icons/circle${this.reasonCheck === 1 ? '-success' : ''}.png`">
          </div>
          <div class="radio-item" @click="disputeCheck(2, '串码有误或无效')">
            <span>串码有误或无效</span>
            <img :src="`/src/assets/icons/circle${this.reasonCheck === 2 ? '-success' : ''}.png`">
          </div>
          <div class="radio-item" @click="disputeCheck(3, '串码已使用')">
            <span>串码已使用</span>
            <img :src="`/src/assets/icons/circle${this.reasonCheck === 3 ? '-success' : ''}.png`">
          </div>
          <mt-field label="其他" placeholder="请输入纠纷原因" v-model="reasonInput"></mt-field>
          <div class="button-group">
            <mt-button class="cancel" @click.native="closeDispute">取消</mt-button>
            <mt-button class="confirm" @click.native="disputeOrder">确认</mt-button>
          </div>
        </div>
      </mt-popup>
    </div>
  </div>
</template>

<script>
  import {MessageBox, Toast} from 'Mint-ui'
  import MobileBind from '@/components/MobileBind'

  export default {
    name: 'Buy',
    components: {
      MobileBind
    },
    data () {
      return {
        selected: '',
        tabMenu: {1: '待支付', 2: '待使用', 3: '已完成', 4: '纠纷中'},
        // 搜索
        ifSearch: false,
        searchInput: '',
        searchUploadImg: '',
        searchList: [],
        // 自动加载
        allLoaded2: false,
        allLoaded3: false,
        allLoaded4: false,
        autoFill: false,
        page2: 1,
        page3: 1,
        page4: 1,
        limit: 10,
        payList: [],
        toUseList: [],
        toUseList1: [],
        toUseList2: [],
        finishList: [],
        disputeList: [],
        // popup层
        popupVisible: false,
        qrCode: '',
        orderDetailId: 0,
        // 纠纷
        reason: '',
        reasonInput: '',
        reasonCheck: 0,
        disputePopup: false,
        // 平台商品
        platfromPayList: [],
        platfromToUseList: [],
        platfromUsedList: []
      }
    },
    methods: {
      changeSelect (v) {
        this.$router.replace({name: 'Buy', params: {tab: v}, query: this.$route.query})
        switch (Number(v)) {
          case 1:
            this.getPayList()
            break
          case 2:
            this.page2 = 1
            this.toUseList = []
            this.toUseList1 = []
            this.toUseList2 = []
            this.allLoaded2 = false
            this.getToUseList()
            break
          case 3:
            this.page3 = 1
            this.finishList = []
            this.allLoaded3 = false
            this.getFinishList()
            break
          case 4:
            this.page4 = 1
            this.disputeList = []
            this.allLoaded4 = false
            this.getDisputeList()
            break
        }
      },
      getPayList () {
        let params = {page: 1, limit: 20}
        this.$post('/vue/order/to_pay_list', params).then(data => {
          this.payList = data.order_list
          this.platfromPayList = data.platform
        })
      },
      getToUseList () {
        let params = {page: this.page2, limit: this.limit}
        this.$post('/vue/order/for_use_list', params).then(data => {
          this.ifSearch = data.is_coupon
          this.platfromToUseList = data.platform
          if (data.is_coupon) {
            if (data.coupon_list.length > 0 || data.other_list.length > 0) {
              this.toUseList1 = this.toUseList1.concat(data.coupon_list)
              this.toUseList2 = this.toUseList2.concat(data.other_list)
            } else {
              this.page2--
              this.allLoaded2 = true
            }
          } else {
            if (data.order_list.length > 0) {
              this.toUseList = this.toUseList.concat(data.order_list)
            } else {
              this.page2--
              this.allLoaded2 = true
            }
          }
        })
      },
      getFinishList () {
        let params = {page: this.page3, limit: this.limit, character: 'buyer'}
        this.$post('/vue/order/finish_list', params).then(data => {
          this.platfromUsedList = data.platform
          if (data.order_list.length > 0) {
            this.finishList = this.finishList.concat(data.order_list)
          } else {
            this.page3--
            this.allLoaded3 = true
          }
        })
      },
      getDisputeList () {
        let params = {page: this.page4, limit: this.limit, character: 'buyer'}
        this.$post('/vue/order/dispute_list', params).then(data => {
          if (data.order_list.length > 0) {
            this.disputeList = this.disputeList.concat(data.order_list)
          } else {
            this.page4--
            this.allLoaded4 = true
          }
        })
      },
      loadBottom () {
        let field = this.$route.params.tab
        setTimeout(() => {
          switch (Number(field)) {
            case 2:
              this.page2++
              this.getToUseList()
              this.$refs.loadmore2.onBottomLoaded()
              break
            case 3:
              this.page3++
              this.getFinishList()
              this.$refs.loadmore3.onBottomLoaded()
              break
            case 4:
              this.page4++
              this.getDisputeList()
              this.$refs.loadmore4.onBottomLoaded()
              break
          }
        }, 1500)
      },
      showQrcode (v, id) {
        this.qrCode = v
        this.orderDetailId = id
        this.popupVisible = true
      },
      closePopup () {
        this.popupVisible = false
      },
      cancelOrder (id) {
        let params = {order_id: id}
        MessageBox.confirm('确认取消订单？', '温馨提示').then(action => {
          if (action === 'confirm') {
            this.$post('/vue/order/cancel_order', params).then(data => {
              msg('取消订单成功')
              for (let i = 0; i < this.payList.length; i++) {
                if (this.payList[i].id === id) {
                  this.payList.splice(i, 1)
                  this.closePopup()
                }
              }
            })
          }
        })
      },
      alreadyUsed () {
        let params = {
          order_detail_id: this.orderDetailId,
          alter_status: 'complete'
        }
        MessageBox.confirm('请确认您已使用券码！', '温馨提示').then(action => {
          if (action === 'confirm') {
            this.$post('/vue/order/alter_order_detail', params).then(data => {
              msg('券码已确认使用')
              // 刷新已使用列表
              this.page3 = 1
              this.finishList = []
              this.getFinishList()
              for (let i = 0; i < this.toUseList.length; i++) {
                if (this.toUseList[i].order_detail_id === this.orderDetailId) {
                  this.toUseList.splice(i, 1)
                  this.closePopup()
                }
              }
            })
          }
        })
      },
      // 检测是否绑定手机号
      sendSms () {
        this.$post('/vue/goods/check_user_phone', '').then(data => {
          if (data === 'need_phone') {
            this.$refs.mobileBind.popShow = true
          } else {
            this.showDispute()
          }
        })
      },
      disputeOrder () {
        let params = {
          order_detail_id: this.orderDetailId,
          alter_status: 'dispute',
          reason: `${this.reason}~${this.reasonInput}`
        }
        if (params.reason === '~') {
          msg('请选择或者填写纠纷原因')
          return false
        }
        this.$post('/vue/order/alter_order_detail', params).then(data => {
          MessageBox.alert('券码纠纷已通知管理员处理', '温馨提示').then(action => {
            if (action === 'confirm') {
              this.closePopup()
              this.closeDispute()
              this.$refs.tabItem[3].$el.click()
            }
          })
        })
      },
      showDispute () {
        this.disputePopup = true
      },
      closeDispute () {
        this.disputePopup = false
      },
      disputeCheck (check, reason) {
        this.reasonCheck = check
        this.reason = reason
      },
      // 平台商品
      cancelPlatformOrder (id) {
        MessageBox.confirm('确认取消订单？', '温馨提示').then(action => {
          if (action === 'confirm') {
            let params = {order_id: id}
            this.$post('/vue/order/cancel_platform_order', params).then(data => {
              msg('取消订单成功')
              for (let i = 0; i < this.platfromPayList.length; i++) {
                if (this.platfromPayList[i].id === id) {
                  this.platfromPayList.splice(i, 1)
                }
              }
            })
          }
        })
      },
      platformRefund (id, price) {
        let content = `${price < 1000 ? '是否申请退款？如退款，将扣除1%手续费并把剩余款项退至您的帐户余额。<p style="color:#FF8162;">*注：若支付宝付款，请提现至微信（防风控）。</p>' : '是否申请退款？如退款，将扣除0.8%手续费并把剩余款项退至您的帐户余额。<p style="color:#FF8162;">*注：若支付宝付款，请提现至微信（防风控）。</p>'}`
        MessageBox.confirm(content, '温馨提示').then(action => {
          if (action === 'confirm') {
            let params = {order_id: id}
            this.$post('/vue/my/refund', params).then(data => {
              msg('申请退款成功，请注意余额变动')
              for (let i = 0; i < this.platfromToUseList.length; i++) {
                if (this.platfromToUseList[i].id === id) {
                  this.platfromToUseList.splice(i, 1)
                }
              }
            })
          }
        })
      },
      // 券商搜券
      search () {
        let params = {imei: this.searchInput}
        this.$post('/vue/order/search', params).then(data => {
          if (data.length > 0) {
            this.searchList = data
          } else {
            MessageBox.confirm('你搜索的券码未找到', '温馨提示', {
              confirmButtonText: '是',
              cancelButtonText: '否'
            }).then(action => {
              if (action === 'confirm') {
                let params = {imei: this.searchInput, image: this.searchUploadImg}
                this.$post('/vue/coupon_customer/dispute', params).then(data => {
                  msg('登记成功')
                  this.searchList = []
                })
              }
            })
          }
        })
      },
      // 券商提货
      takeGoods () {
        this.$post('/vue/order/create_code').then(data => {
          let content = `<p>您的提货码为：${data}</p><p>点击确定即可跳转到提货页面</p>`
          MessageBox.alert(content, '温馨提示').then(action => {
            if (action === 'confirm') {
              this.$router.push({name: 'TakeGoods'})
            }
          })
        })
      },
      uploads (event) {
        let file = event.target.files[0]
        let formdata = new FormData()
        formdata.append('file', file)
        this.$post('/vue/upload/index', formdata).then(data => {
          msg('上传成功', () => {})
          this.searchUploadImg = data
          // 串码解析
          this.qrcodeToImei(data)
        })
      },
      qrcodeToImei (img) {
        let params = {image: img}
        this.$post('/qrcode/index.php', params).then(data => {
          this.searchUploadImg = data
        })
      }
    },
    mounted () {
      this.selected = this.$route.params.tab.toString()
      switch (Number(this.selected)) {
        case 1:
          this.getPayList()
          break
        case 2:
          this.getToUseList()
          break
        case 3:
          this.getFinishList()
          break
        case 4:
          this.getDisputeList()
          break
      }
    }
  }
  const msg = m => {
    Toast({
      message: m,
      position: 'middle',
      duration: 2000
    })
  }
</script>

<style lang="less">
  @c-124: rgb(124, 124, 124);
  @c-142: rgb(142, 142, 142);
  @c-169: rgb(169, 169, 169);
  @c-226: rgb(226, 226, 226);
  @c-235: rgb(235, 235, 235);
  @c-red: rgb(255, 129, 98);
  @c-dark-red: rgb(217, 117, 99);
  @c-light-blue: rgb(242, 247, 250);
  @c-blue: rgb(108, 184, 222);

  .user-buy {
    background-color: #FFF;
    height: calc(~'100vh - 58px');
    overflow-x: hidden;
    overflow: scroll;
    .mint-navbar {
      border-bottom: 1px solid @c-226;
      .mint-tab-item {
        padding: 11.5px 0;
        color: @c-169; 
        &.is-selected {
          border-bottom: 1px solid @c-blue;
          color: @c-blue;
          margin-bottom: -1px;
        }
        .mint-tab-item-label {
          font-size: 13px;
          line-height: 24px;
        }
      }
    }
    .search-group {
      display: flex;
      padding: 12px 12px 0;
      justify-content: space-between;
      .search-input {
        flex: 0 0 auto;
        padding: 6px 12px;
        background-color: rgba(194, 194, 194, 0.12);
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
        border-radius: 6px;
        display: flex;
        align-items: center;
        align-content: center;
        justify-content: center;
        &.long {
          width: 74%;
        }
        &.short {
          width: 9%;
        }
        .input-text {
          flex: 1;
          font-size: 12px;
          line-height: 22px;
          padding: 0;
          margin: 0;
          border: 0;
          background-color: transparent;
          color: @c-blue;
          &::-webkit-input-placeholder {
            color: #BBB;
          }
        }
        .input-file {
          width: 20px;
          height: 20px;
          overflow: hidden;
          position: relative;
          input, img {
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
          }
          input {
            opacity: 0;
          }
        }
        .v-line {
          flex: 0 0 auto;
          display: block;
          width: 1px;
          height: 12px;
          margin: 0 12px;
          background-color: @c-226;
        }
        .text {
          flex: 0 0 auto;
          font-size: 13px;
          line-height: 24px;
          color: @c-142;
        }
      }
    }
    .buy-card {
      margin: 0 12px 12px;
      padding: 8px;
      background-color: @c-light-blue;
      text-align: left;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
      &:first-child {
        margin-top: 12px;
      }
      .content {
        border-bottom: 1px solid @c-226;
        padding-bottom: 8px;
        display: flex;
        justify-content: space-between;
        img {
          flex: 0 0 auto;
          width: 72px;
          height: 72px;
        }
        .text {
          flex: 1;
          margin-left: 8px;
          p {
            font-size: 12px;
            line-height: 24px;
            color: @c-169;
            &.name {
              font-size: 13px;
              font-weight: bold;
              color: @c-124;
            }
            .red {
              font-size: 13px;
              color: @c-red;
            }
          }
        }
      }
      .footer {
        display: flex;
        justify-content: space-between;
        .hint {
          padding-top: 8px;
          flex: 1;
          display: block;
          font-size: 12px;
          line-height: 24px;
          color: @c-dark-red;
        }
        .button {
          padding-top: 4px;
          margin-bottom: -4px;
          flex: 1;
          display: flex;
          justify-content: space-between;
          .mint-button {
            flex: 0 0 auto;
            width: 80px;
            height: 32px;
            padding: 0;
            margin: 0;
            &.cancel {
              border: 0;
              box-shadow: none;
              background-color: transparent;
              &::after {
                display: none;
              }
            }
            &.confirm {
              border-radius: 16px;
              background-color: @c-blue;
              box-sizing: border-box;
              .mint-button-text {
                color: #FFF;
              }
            }
            .mint-button-text {
              font-size: 13px;
              line-height: 24px;
              color: @c-169;
              display: block;
            }
          }
        }
        .qrcode {
          padding-top: 8px;
          flex: 0 0 auto;
          width: 24px;
          height: 24px;
        }
        .complete-img {
          flex: 0 0 auto;
          width: 72px;
          height: 72px;
          margin: -32px -8px -8px 0;
        }
      }
    }
    .mint-loadmore-text {
      color: @c-169;
    }
    .mint-popup {
      width: 80vw;
      padding: 12px;
      border-radius: 12px;
      overflow-x: hidden;
      overflow-y: scroll;
      .picture {
        width: 80vw;
        height: 90%;
      }
      .dispute-reason {
        width: 80vw;
        img {
          width: 100px;
          height: 100px;
        }
        .title {
          color: #FFF;
          font-size: 16px;
          line-height: 32px;
          background-image: url('/src/assets/icons/title-bg-red.png');
          background-size: 60% 80%;
          background-position: center center;
          background-repeat: no-repeat;
        }
        .radio-item {
          display: flex;
          align-items: center;
          align-content: center;
          justify-content: space-between;
          font-size: 13px;
          line-height: 32px;
          color: #000;
          padding: 0 12px;
          span {
            flex: 0 0 auto;
          }
          img {
            flex: 0 0 auto;
            width: 24px;
            height: 24px;
          }
        }
        .mint-field {
          padding: 0 12px;
          min-height: 0;
          height: 32px;
          .mint-cell-wrapper {
            padding: 0;
            line-height: 0;
            background-image: none;
            .mint-cell-title {
              font-size: 12px;
              line-height: 24px;
              color: #000;
              text-align: left;
            }
            .mint-cell-value {
              .mint-field-core {
                font-size: 12px;
                &::-webkit-input-placeholder {
                  color: @c-169;
                }
              }
            }
          }
        }
        .button-group {
          display: flex;
          justify-content: space-between;
          button {
            width: 40%;
            margin: 0 5%;
            flex: 0 0 auto;
            border: 1px solid #000;
            border-radius: 20px;
            &.cancel {
              background-color: transparent;
            }
            &.confirm {
              color: #FFF;
              border-color: @c-red;
              background-color: @c-red;
            }
          }
        }
      }
    }
    .button-group {
      margin-top: 12px;
      display: flex;
      justify-content: space-between;
      .mint-button {
        flex: 0 0 auto;
        width: 40%;
        height: 40px;
        border-radius: 20px;
        font-size: 13px;
        line-height: 24px;
        &.dispute {
          border-color: #000;
          color: #000;
        }
        &.complete {
          border-color: @c-red;
          background-color: @c-red;
          color: #FFF;
        }
      }
    }
  }
  .mint-msgbox-wrapper {
    .mint-msgbox-content {
      .mint-msgbox-message {
        .mini {
          font-size: 12px;
          line-height: 24px;
          text-align: left;
        }
      }
    }
  }
  .mobile-bind {
    .mint-cell {
      .mint-cell-wrapper {
        font-size: 12px;
        padding: 0 16px;
        text-align: left;
        background-size: 100% 1px;
        .mint-cell-title {
          .mint-cell-text {
            line-height: 24px;
          }
        }
        .mint-cell-value {
          .mint-field-core {
            text-align: right;
            color: @c-blue;
            &::-webkit-input-placeholder {
              color: @c-169;
            }
          }
          .mint-field-other {
            img {
              width: 24px;
              height: 24px;;
            }
          }
        }
      }
      &.verify-code {
        .mint-cell-value {
          .mint-field-core {
            text-align: left;
          }
        }
      }
    }
  }
  .pop-in-toast, .mint-toast {
    z-index: 2500;
  }
  .mint-indicator-wrapper {
    z-index: 2500;
  }
</style>